<template>
  <div class="container">
    <header>
      电力巡检系统
    </header>
    <!-- 主要内容区   -->
    <main>
      <el-menu :router="true">
        <el-menu-item v-for="(m,index) in menus" :key="m.id" :index="m.route">
          <i :class="m.icon"></i>
          <span slot="title" v-text="m.name"></span>
        </el-menu-item>
      </el-menu>
      <!--  区域    -->
      <section>
        <router-view class="child-route-container"/>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  name: "Manage",
  data(){
    return {
      menus: []
    }
  },
  mounted() {
    //初始化的时候查询当前用户拥有的菜单
    this.doGet('/menu',{}, resp => {
      this.menus = resp
    })
  }
}
</script>

<style scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

header{
  height: 50px;
  display: flex;
  justify-items: center;
  font-weight: bold;
  font-size: 25px;
  padding-left: 20px;
  line-height: 50px;
  background-color: #4c89da;
}

main{
  flex-grow: 1.0;
  flex-shrink: 0.8;
  display: flex;
  flex-direction: row;
}

.el-menu {
  width: 200px;
}

section{
  flex-grow: 1.0;
  flex-shrink: 0.8;
  position: relative;
}

.child-route-container{
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
}
</style>
